<template>
  <zm-view>
    <zm-list ref="list" :options="options" @query="handleQuery">
      <view v-for="(item, index) in list" :key="index" class="mb-20 px-24 py-30 flex flex-col bg-white">
        <view class="flex justify-between items-center">
          <u-image width="60rpx" height="60rpx" radius="50%" :error-icon="useImage('/zuimei-film-oss/1.0.0/images/avatar.png')" :src="item.headImg" class="head"></u-image>
          <text class="font-30 ml-20">{{ item.nickName }}</text>
          <text class="ml-auto text-999 font-24">{{ item.createTime }}</text>
        </view>
        <view class="mt-24">
          {{ item.content }}
        </view>
        <view v-if="item.imageList && item.imageList.length" class="flex items-center mt-24">
          <view v-for="(img, indexI) in item.imageList" :key="indexI">
            <image :src="img" class="upload-img" mode="aspectFit" @click="handleClickImg(item.imageList, indexI)"></image>
          </view>
        </view>
      </view>
    </zm-list>
  </zm-view>
</template>

<script>
import page from "@/mixins/page"
import hook from "@/mixins/hook"
export default {
  mixins: [page, hook],
  data() {
    return {
      list: [],
      options: {
        emptyText: "暂无反馈记录"
      }
    }
  },
  methods: {
    async handleQuery({ type, page, pageSize, fail, success }) {
      try {
        const res = await uni.$api.feedback.getFeedbackList({ page, pageSize })
        this.list = type == "load" ? [...this.list, ...res.list] : res.list
        success({ list: res.list, total: res.count })
      } catch (e) {
        fail()
      }
    },
    handleClickImg(imgList, index) {
      uni.previewImage({ current: index, urls: imgList })
    }
  }
}
</script>
<style lang="scss" scoped>
.head {
  height: 60rpx;
  width: 60rpx;
  border-radius: 50%;
}
.upload-img {
  width: 160rpx;
  height: 160rpx;
  margin-right: 20rpx;
}
</style>
